EL MENÚ DE ESTE BLOG (Menú por etiquetas)

(saber más de las etiquetas)

  Hoy voy a mostraros un conjunto que culminará en un menú por etiquetas, como el que utiliza este blog, es resultón y eficaz y muy importante: no da problemas. Espero que os sea de utilidad.

Seamos seguidores

La iniciativa "Seamos seguidores" es para ayudarnos entre bloggers.

Soy una apasionada de los Blogs, los sigo, para poder acudir a ellos una y otra vez, tal es mi pasión, que he creado una blogoteca, para que no se me olvide ninguno y poder estar al día de sus publicaciones.

Seguir un blog, es dotarlo de vida y darle a su autor ese empujoncito que a veces le hace falta para seguir adelante.
No obstante, yo solo sigo lo que me gusta o lo que intuyo puede llegar a gustarme, tengo una mente abierta, jejeje. Espero que vosotros hagáis lo mismo.

¿PARA PARTICIPAR?

Simplemente tienes que seguirme y dejar en un comentario el enlace de tu blog para que así también te siga yo ( he de decir que en muestra de respeto yo siempre sigo a quien me sigue). También puedes hacer una entrada para que tus seguidores conozcan esta iniciativa.

AL DÍA

...Hoy os quiero presentar un widget que tendrá a todos tus visitantes debidamente informados sobre las portadas del día de casi todos los periodicos, es muy atractivo y su existencia me ha llegado a través de mi admirado blog :
Es totalmente configurable tanto en tamaño como en color de fondo y su aspecto es este: (justo en el encontrareis el enlace del widget).

Caja de comentarios muy elegante

   Si me dejáis un comentario, obtendréis vuestra recompensa, una nueva forma de presentar los comentarios totalmente innovadora, original y elegante, tal cual como se ve en mi blog, el color es totalmente configurable, donde encontréis esta linea: background: #299DFF; cambiáis  el color y listo.

¿Cómo se implanta en vuestro espacio? lo explica la web a donde os dirijo perfectamente y os ofrece el código necesario para llevarlo a cabo. 

No quiero presionaros demasiado, jejeje, no estáis obligados a dirigirme la palabra, solo ha acceder a la zona de COMENTARIOS alli os he dejado un mensaje con el link, no soy del todo mala jajaja...

Que lo disfrutéis.

UN LINK CON ESTYLO

• BLOGOTECA

• NOTAS DE CAMPO ÍNTIMAS

• DEJAME UN POEMA

• VUESTROS POEMAS

UNA IMAGEN COMO TÍTULO DE UN GADGET

   Lo primero que haremos sera añadir el gadget a personalizar en tu barra lateral o en cualquier sección del blog.
Para ello, accede al apartado Diseño>Elementos de la página>Añadir un gadget.
Seguidamente, atribúyele el título que quieras.
Guárdalo y sigue estos pasos: 
1º) Busca en tu plantilla el gadget en cuestión (Control+f, para acceder al buscador) hasta que aparezca un código similar este, unas veces puede ser mas largo o más corto, resulta indiferente para lo queremos cambiar:

<b:widget id='HTML1' locked='false' title='EL NOMBRE DE TU GADGET ' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != ""'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:includable>
</b:widget>

2º) Reemplaza la línea resaltada en color verde por esto:
<img src="URL DE TU IMAGEN"/> (podría estar alojada en Picasa>

3º) Guarda la plantilla para terminar.

UN MENÚ FÁCIL DE HACER Y COLOCAR

  Lo primero de todo comentar con agrado que he localizado un excelente blog del que precisamente proviene este menú,  cargado de contenidos útiles para nuestros propósitos estéticos y mucho más, tanto es así que he decidido incluirlo en mi lista de imprescindibles, no dejéis de pasaros por el .

Ahora, lo prometido es deuda aquí va el código de este magnifico menú balanceante

• enlace
  • subenlace
  • subenlace
  • subenlace
• enlace
  • subenlace
  • subenlace
  • subenlace
• enlace
  • subenlace
  • subenlace
  • subenlace

tan solo tendréis que cortar y pegar el codigo en una gadget html/java... sustituyendo la parte  resaltada en rojo por los enlaces deseados. 
Dentro del div están las entrada propiamente dichas del MENÚ, para aumentar o disminuir tan solo habréis de añadir o quitar  este bloque tal cual :

<li><a href="#">enlace</a>   <ul>
<li><a href="#">subenlace</a></li>
<li><a href="#">subenlace</a></li>
<li><a href="#">subenlace</a></li>
</ul>
El ancho del menú se encuentra en la zona de Style:
#containerbalanceo {
  position: relative;
  width: 96%;   Este es el valor que deberéis cambiar.
}

Hay otros muchos valores que se pueden cambiar en esta zona ir probando.
 EL CÓDIGO COMPLETO:

<div id="containerbalanceo">
<ul id="menubalanceo">
<li><a href="#">enlace</a>   <ul>
<li><a href="#">subenlace</a></li>
<li><a href="#">subenlace</a></li>
<li><a href="#">subenlace</a></li>
</ul>
</li>
<li><a href="#">enlace</a>   <ul>
<li><a href="#">subenlace</a></li>
<li><a href="#">subenlace</a></li>
<li><a href="#">subenlace</a></li>
</ul>
</li>

<li><a href="#">enlace</a>   <ul>
<li><a href="#">subenlace</a></li>
<li><a href="#">subenlace</a></li>
<li><a href="#">subenlace</a></li>
</ul>
</li>


<li><a href="#">enlace</a>   <ul>
<li><a href="#">subenlace</a></li>
<li><a href="#">subenlace</a></li>
<li><a href="#">subenlace</a></li>
</ul>
</li>


<li><a href="#">enlace</a>   <ul>
<li><a href="#">subenlace</a></li>
<li><a href="#">subenlace</a></li>
<li><a href="#">subenlace</a></li>
</ul>
</li>

</ul>
</div>


<style>

#containerbalanceo {
  position: relative;
  width: 96%; 
}

#containerbalanceo:after {
  content: "";
  display: block;
  clear: both;
  height: 0;
}

#menubalanceo {
  position: relative;
  float: left;
  width: 100%;
  padding: 0 20px;
  border-radius: 3px;
  box-shadow: inset 0 1px 1px rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.15), 0 1px 3px rgba(0,0,0,.15);

  background: #cccccc;
background: -moz-linear-gradient(top,  #cccccc 0%, #9e9e9e 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cccccc), color-stop(100%,#9e9e9e));
background: -webkit-linear-gradient(top,  #cccccc 0%,#9e9e9e 100%);
background: -o-linear-gradient(top,  #cccccc 0%,#9e9e9e 100%);
background: -ms-linear-gradient(top,  #cccccc 0%,#9e9e9e 100%);
background: linear-gradient(to bottom,  #cccccc 0%,#9e9e9e 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#9e9e9e',GradientType=0 );


}

#menubalanceo, #menubalanceo ul {
  list-style: none;
}

#menubalanceo > li {
  float: left;
  position: relative;
  border-right: 1px solid rgba(0,0,0,.1);
  box-shadow: 1px 0 0 rgba(255,255,255,.25);

  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  -ms-perspective: 1000px;
  -o-perspective: 1000px;
  perspective: 1000px;

}

#menubalanceo > li:first-child {
  border-left: 1px solid rgba(255,255,255,.25);
  box-shadow: -1px 0 0 rgba(0,0,0,.1), 1px 0 0 rgba(255,255,255,.25);
}

#menubalanceo a {
                font-family:century gothic;
  display: block;
  position: relative;
  z-index: 10;
  padding: 13px 20px 13px 20px;
  text-decoration: none;
  color: rgba(75,75,75,1) !important;
  line-height: 1;
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -.05em;
  background: transparent; 
  text-shadow: 0 1px 1px rgba(255,255,255,.9);
  -webkit-transition: all .25s ease-in-out;
  -moz-transition: all .25s ease-in-out;
  -o-transition: all .25s ease-in-out;
  -ms-transition: all .25s ease-in-out;
  transition: all .25s ease-in-out;

}
        #menubalanceo > li:hover > a {
                font-family:century gothic;
  background: #333;
  color: #00DFFC !important;
  text-shadow: none;
}

#menubalanceo li ul  {
  position: absolute;
  left: 0;
  z-index: 1;
  width: 200px;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  border-bottom-left-radius: 4px;
  border-bottom-right-radius: 4px;
  background: transparent;
  overflow: hidden;
  -webkit-transform-origin: 50% 0%;
  -moz-transform-origin: 50% 0%;
  -o-transform-origin: 50% 0%;
  -ms-transform-origin: 50% 0%;
  transform-origin: 50% 0%;
}


#menubalanceo li:hover ul {

  padding: 15px 0;
  background: #333;
  opacity: 1;
  visibility: visible;
  box-shadow: 1px 1px 7px rgba(0,0,0,.5);

  -webkit-animation-name: swingdown;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: ease;

  -moz-animation-name: swingdown;
  -moz-animation-duration: 1s;
  -moz-animation-timing-function: ease;

  -o-animation-name: swingdown;
  -o-animation-duration: 1s;
  -o-animation-timing-function: ease;

  -ms-animation-name: swingdown;
  -ms-animation-duration: 1s;
  -ms-animation-timing-function: ease;

  animation-name: swingdown;
  animation-duration: 1s;
  animation-timing-function: ease;

}

@-webkit-keyframes swingdown {
  0% {
   opacity: .99999;
   -webkit-transform: rotateX(90deg);
  }

  30% { 
   -webkit-transform: rotateX(-20deg) rotateY(5deg);
   -webkit-animation-timing-function: ease-in-out;
  }

  65% {
   -webkit-transform: rotateX(20deg) rotateY(-3deg);
   -webkit-animation-timing-function: ease-in-out;
  }

  100% {
   -webkit-transform: rotateX(0);
   -webkit-animation-timing-function: ease-in-out;
  }
}

@-moz-keyframes swingdown {
  0% {
   opacity: .99999;
   -moz-transform: rotateX(90deg);
  }

  30% { 
   -moz-transform: rotateX(-20deg) rotateY(5deg);
   -moz-animation-timing-function: ease-in-out;
  }

  65% {
   -moz-transform: rotateX(20deg) rotateY(-3deg);
   -moz-animation-timing-function: ease-in-out;
  }

  100% {
   -moz-transform: rotateX(0);
   -moz-animation-timing-function: ease-in-out;
  }
}

@-o-keyframes swingdown {
  0% {
   opacity: .99999;
   -o-transform: rotateX(90deg);
  }

  30% { 
   -o-transform: rotateX(-20deg) rotateY(5deg);
   -o-animation-timing-function: ease-in-out;
  }

  65% {
   -o-transform: rotateX(20deg) rotateY(-3deg);
   -o-animation-timing-function: ease-in-out;
  }

  100% {
   -o-transform: rotateX(0);
   -o-animation-timing-function: ease-in-out;
  }
}

@-ms-keyframes swingdown {
  0% {
   opacity: .99999;
   -ms-transform: rotateX(90deg);
  }

  30% { 
   -ms-transform: rotateX(-20deg) rotateY(5deg);
   -ms-animation-timing-function: ease-in-out;
  }

  65% {
   -ms-transform: rotateX(20deg) rotateY(-3deg);
   -ms-animation-timing-function: ease-in-out;
  }

  100% {
   -ms-transform: rotateX(0);
   -ms-animation-timing-function: ease-in-out;
  }
}

@keyframes swingdown {
  0% {
   opacity: .99999;
   transform: rotateX(90deg);
  }

  30% { 
   transform: rotateX(-20deg) rotateY(5deg);
   animation-timing-function: ease-in-out;
  }

  65% {
   transform: rotateX(20deg) rotateY(-3deg);
   animation-timing-function: ease-in-out;
  }

  100% {
   transform: rotateX(0);
   animation-timing-function: ease-in-out;
  }
}

#menubalanceo li li a {
                font-family:century gothic;
  padding-left: 15px;
  font-weight: 400;
  color: #00DFFC !important;
  text-shadow: none;
  border-top: dotted 1px transparent;
  border-bottom: dotted 1px transparent;
  -webkit-transition: all .15s linear;
  -moz-transition: all .15s linear;
  -o-transition: all .15s linear;
  -ms-transition: all .15s linear;
  transition: all .15s linear;
}

#menubalanceo li li a:hover {
  color: rgba(0,223,252,1);
  border-top: dotted 1px rgba(255,255,255,.15);
  border-bottom: dotted 1px rgba(255,255,255,.15);
  background: rgba(0,223,252,.02);
}

</style>

¡VENGA! Echarle una ojeada a este blog:

Un índice de autores (interesante)

Un script original:

Este simple script hace algo no tan simple: organiza y muestra un índice de los autores de un blog.
No solo nos indica la cantidad de entradas de cada uno de ellos, sino que además, nos muestra los enlaces a las mismas, simplemente genial.
Para lograrlo, tan solo tendréis que colocar el código que os dejo a continuación en un gadget HTML/Javascript.

El SCRIPT <script type="text/javascript" src="http://santyweb.googlecode.com/files/autor_1.0.min.js"></script>

Este script puede incluso configurarse gráficamente para enriquecer su estética el "cómo" aquí abajo, la fuente donde hallé este magnifico recurso.

CONTADOR USUARIOS

    En esta ocasión os remito a una pagina, donde podréis crear un contador de visitantes online , fácil y sin complicaciones, tan solo deberéis ingresar la dirección de vuestro blog, y el código a incrustar estará listo en apenas unos segundos, más sencillo, imposible.

El resultado, este:

Usuarios Online

Charla con tus visitantes

Crear un widget de correo de voz en su sitio web o añadir la aplicación de correo de voz a su página de Facebook nunca fue tan sencillo...